<template>
<div class="container__">
    <div class="current" v-if="isphone">
        当前手机号： {{isphone}}
    </div>
    <div class="faildcontainer">
        <div class="item_">
            <h3 v-if="isphone">新的手机号</h3>
            <h3 v-else>手机号</h3>
            <van-field :error-message="errormse" @change="change" type="number" maxlength="11" :value="addform.phone" placeholder="请输入本人手机号" use-button-slot>
                <van-button @click="sendMes" :disabled="disabled" plain slot="button" size="small" type="primary">{{inner}}<span v-if="COUNT!=60">{{COUNT}}</span></van-button> 
            </van-field>
        </div>
        <div class="item_">
            <h3>验证码</h3>
            <van-field @change="passchange" maxlength="6" :value="addform.pass" placeholder="请输入短信验证码" />
        </div>
    </div>

    <div class="submit" @click="sbmit">
        提交
    </div>
   
</div>
</template>

<script>

import {
    checkPhone
} from '@/utils/index'
import {
    sendmsg
} from '@/api/my'
import {
    setinfo
} from '@/api/my'
export default {
    data() {
        return {
            inner: '发送验证码',
            COUNT: 60,
            disabled: true,
            errormse: '',
            addform: {
                phone: '',
                code: '',
                type: 11,
            },
            isphone: null,
            interval: null,
        }
    },
    methods: {

        change(el) {
            this.addform.phone = el.mp.detail
            if (this.addform.phone.length < 11) return this.disabled = true, this.inner = "发送验证码"
            this.disabled = false

        },
        passchange(el) {
            this.addform.code = el.mp.detail
        },
        sendMes(el) {
            if (this.disabled) return
            if (!checkPhone(this.addform.phone)) return this.errormse = "请输入正确手机号"
            this.errormse = ''
            sendmsg({
                phone: this.addform.phone
            }).then(res => {

            })
            this.interval = setInterval(() => {
                this.COUNT--
                this.inner = "重新获取"
                this.disabled = true
                if (this.COUNT == 0) {
                    clearInterval(this.interval)
                    this.disabled = false
                    this.COUNT = 60
                }
            }, 1000)

        },
        sbmit() {
            if(this.addform.phone.length!=11){
                wx.showToast({
                    title: "请填写正确的手机号",
                    icon: 'none',
                });
            }else if(this.addform==0){
               wx.showToast({
                    title: "请填写密码",
                    icon: 'none',
                });
            }else{
               setinfo(this.addform).then(res => {
                    if(res.code==200){
                        wx.showToast({
                            title: res.msg,
                            icon: 'none',
                            duration: 2000,
                            success: (result)=>{
                                 wx.switchTab({
                                    url: '/pages/my/main'
                                })
                            }
                        });
                    }else if(res.code==201){
                        wx.showToast({
                            title: res.msg,
                            icon: 'none',
                        });
                    }
                    
                }).catch(err => {

                })
            }
            
        },
    },
    onShow() {
      
    },
    onUnload() {
        this.errormse = ''
        this.inner = '发送验证码'
        clearInterval(this.interval)
        this.COUNT = 60
        this.addform.phone = ''
        this.addform.pass = ''
    },
    onLoad() {
        
        if (!wx.getStorageSync('user_info').phone) return
        this.isphone = wx.getStorageSync('user_info').phone
        wx.setNavigationBarTitle({
            title: '换绑手机号',
            success: (result)=>{
                
            },
        });
    }
}
</script>

<style lang="scss">
.container__ {
    background-color: #fff;
    min-height: calc(100vh - 30px);
    font-size: 16px;
    // padding: 40px 15px;
    box-sizing: border-box;

    .current {
        padding: 0 16px;
        height: 34px;
        width: 100%;
        background-color: #F4F5F5;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #999999;
        margin-bottom: 18px;
    }

    .submit {
        width: 345px;
        margin: 36px auto;
        color: #fff;
        background-color: #1A84FB;
        border-radius: 5px;
        font-size: 15px;
        font-weight: bold;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .faildcontainer {
        h3 {
            font-size: 15px;
            font-weight: bold;
            color: rgba(70, 183, 255, 1);
            padding: 0 15px;
            box-sizing: border-box;
        }

        .van-button--primary {
            border: 1px solid #1A84FB;
            border-radius: 8px;
            color: #1A84FB;
            // height: 25px;
        }

        .item_ {
            margin-top: 30px;
        }
    }
}
</style>
